import { useEffect } from "react";
import { checkLogin } from '../apis/administrator'
import { LoginData } from '../apis/administrator/type';
import { useNavigate } from "react-router-dom";
import { Button, message, Form, Input } from 'antd';
import LoginImg from '../assets/images/login.jpg'
import LogoImg from '../assets/images/logo.png'
import QR from '../assets/images/QR.jpg'
import '../assets/scss/login.scss'
import { debounce } from '../utils/debounce'

const Index = (): JSX.Element => {

  const navigate = useNavigate()
  const [loginform] = Form.useForm();
  // const [user, setUser] = useState({ username: "admin123", pass: "123" });

  useEffect(() => {
    loginform.setFieldsValue({ username: "qqq", pass: "qqq" })
  }, [])

  // const [loginValue, setLoginValue] = useState<any>()
  const onFinish = (values: LoginData) => {
    // console.log(':', values);
    // let submitForm = debounce(enter, 500, true)
    // login()
    loginplass(values)
  };

  const login = async (value: any) => {
    const res: any = await checkLogin(value)
    console.log(res);
    if (res && res.errCode === 10000) {
      sessionStorage.setItem('token', res.data.token)
      sessionStorage.setItem('menu', JSON.stringify(res.data.menu))
      sessionStorage.setItem('name', value.username)
      navigate('/home')
      message.open({
        type: 'success',
        content: '登录成功',
      });
    } else {
      message.open({
        type: 'error',
        content: '账号或密码错误',
      });
    }
  }
  const loginplass = debounce(login, 1000, true)

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
  return (
    <div className='login'>
      <div className='top'>
        <img src={LogoImg} alt="" className="logo-lmg" />
      </div>
      <div className='bottom'>
        <div className='login-left'>
          <img className='leftImg' src={LoginImg} />
        </div>
        <div className='login-right'>
          <div className="title">账号登录</div>
          <img className="qr" src={QR} alt="" />
          <Form
            name="basic"
            form={loginform}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
          >
            <Form.Item
              label=""
              name="username"
              rules={[{ required: true, message: '请输入账号!' }]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label=""
              name="pass"
              rules={[{ required: true, message: '请输入密码!' }]}
            >
              <Input.Password />
            </Form.Item>
            <div className="forget">忘记密码?</div>
            <Form.Item wrapperCol={{ offset: 0, span: 16 }}>
              <Button className='btn' htmlType="submit">
                登录
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
      <div className="icp">云教务系统@2021 京ICP备17033472号-4</div>
    </div>
  )
}
export default Index;